export default {
  bind(el, binding, vnode) {
    const { roles, tenant_accounts, uiPermissionList } = vnode.context.$store.getters
    const ADMIN = 'ADMIN,MT_ADMIN'
    // 如果是超级管理员,则不验证权限
    if (roles.some(item => ADMIN.includes(item)) || tenant_accounts.tenantAdmin) return
    const uuid = el.getAttribute('data-oauthUuid')
    // 如果没有设置data-oauthUuid ,则不验证权限
    if (uuid === null) return
    const { value } = binding
    const { path } = vnode.context.$route
    const {
      permissionVisible,
      permissionEnable
      // permissionReadOnly
    } = uiPermissionList[ path ]
    switch (el.tagName) {
      case 'BUTTON':
        if (!permissionVisible.includes(uuid)) {
          vnode.context.$nextTick(() => {
            el.parentNode && el.parentNode.removeChild(el)
          })
          break
        }
        if (!permissionEnable.includes(uuid)) {
          vnode.context.$nextTick(() => {
            el.disabled = true
            el.className += ' is-disabled'
          })
          break
        }
        // 按钮不验证 readonly 属性
        // if (!permissionReadOnly.includes(uuid)) {
        //   vnode.context.$nextTick(() => {
        //     el.disabled = true
        //   })
        //   break
        // }
        break
      case 'DIV':
        // eslint-disable-next-line no-case-declarations
        const inputNode = el.getElementsByTagName(value || 'input')
        if (inputNode.length) {
          if (!permissionVisible.includes(uuid)) {
            vnode.context.$nextTick(() => {
              // el.parentNode && el.parentNode.parentNode.remove()
              el.parentNode && el.parentNode.removeChild(el)
            })
            break
          }
          if (!permissionEnable.includes(uuid)) {
            vnode.context.$nextTick(() => {
              Array.from(inputNode).forEach(item => {
                const currParentNode = item.parentNode
                item.setAttribute('disabled', true)
                item.className += ' read-only-input'
                item.parentNode.className += ' read-only-input is-disabled'
                item.style.color = '#BDBDBD'
                // 处理 switch 开关的禁用状态
                if (item.type === 'checkbox' && currParentNode.getAttribute('role') === 'switch') {
                  const copyed = currParentNode.cloneNode(true)
                  copyed.className += ' is-disabled'
                  currParentNode.parentNode.replaceChild(copyed, currParentNode)
                  item.setAttribute('readonly', true)
                  // 处理 日期选择器 的禁用状态
                } else if (currParentNode.className.includes('el-date-editor')) {
                  const closeNode = currParentNode.getElementsByClassName('el-input__suffix')[ 0 ]
                  const closeCopyed = closeNode.cloneNode(true)
                  const copyed = item.nextSibling.cloneNode(true)
                  currParentNode.replaceChild(copyed, item.nextSibling)
                  currParentNode.replaceChild(closeCopyed, closeNode)
                  // 处理 下拉选择器 的禁用状态
                } else if (currParentNode.parentNode.className.includes('el-select')) {
                  const copyed = currParentNode.parentNode.cloneNode(true)
                  el.getElementsByClassName('el-form-item__content')[0].replaceChild(copyed, currParentNode.parentNode)
                }
              })
            })
            break
          }
          // if (!permissionReadOnly.includes(uuid)) {
          //   vnode.context.$nextTick(() => {
          //     inputNode.forEach(item => {
          //       item.readonly = true
          //       el.className += 'read-only-input'
          //       item.style.color = '#BDBDBD'
          //     })
          //   })
          //   break
          // }
        }
        break
      default:
        break
    }
  }
}
